<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 角色数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {roleNo: string, roleCreateTime: string, roleName: string, roleCreateMan: string, roleCountNumber: string}, roleName: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const roleData = reactive({
    roleName: '',
    tableData: [],
    total: 0,
    pageSize: 7,
    pageNum: 1,
    form: {
        roleNo: '',
        roleName: '',
        roleCreateMan: '',
        roleCreateTime: '',
        roleCountNumber: '',
    }
})

/**
 * 加载角色
 */
const loadRole = () => {
    request.get(`/api/role/find-role-page`, {
        params: {
            pageNum: roleData.pageNum,
            pageSize: roleData.pageSize,
            roleName: roleData.roleName
        }
    }).then(res => {
        roleData.tableData = res.data?.list || []
        roleData.total = res.data?.list.map(item => item.roleCountNumber)[0] || 0;
    })
}
// 调用角色加载方法，获取后台数据
loadRole()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadRole()
}

/**
 * 重置
 */
const reset = () => {
    roleData.roleName = ''
    // 重置时，重新加载数据即可
    loadRole()
}
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="roleData.roleName"
                      placeholder="请输入角色名称查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadRole" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-table :data="roleData.tableData" style="width: 100%">
                    <el-table-column prop="roleNo" label="角色号"/>
                    <el-table-column prop="roleName" label="角色名"/>
                    <el-table-column prop="roleCreateMan" label="创建者"/>
                    <el-table-column prop="roleCreateTime" label="创建时间"/>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="roleData.pageNum"
                           v-model:page-size="roleData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="roleData.total"/>
        </div>
    </div>
</template>

<style scoped>

</style>